<template>
  <div class="container">
    <div class="row">
      <img :src="calendar"></img>
      <span>{{ number }}</span>
    </div>
    <div class="row">
      <div class="button">预览</div>
      <div class="button">导出</div>
    </div>
  </div>
</template>

<script setup>
import calendar from "@/assets/mapicon/calender.png"

const res = defineProps({
  number: String,
});

let { number } = toRefs(res);
</script>

<style scoped>
.container{
    border: 1px solid gray;
    width: 200px;
    height: 200px;
}

img{
    width: 100px;
    height: 100px;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}

.row span{
    font-size: 26px;
}

.button{
    margin-top: 10px;
    font-size: 22px;
}
</style>
